
<template>
  <div class="app-container">   
    <el-row>
      <el-col :sm="24" :lg="16" :offset="4">
         
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-if="dsInfo.searchExp" label-width="88px">
      <el-form-item :label="dsInfo.searchTitle" prop="searchValue">
        <el-select v-model="queryParams.searchValue" placeholder="请选择" style="width: 160px" clearable v-if="dsInfo.searchExp == 'ds'">
          <el-option
            v-for="dict in searchOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
            
        <el-select v-model="queryParams.searchValue" placeholder="请选择" style="width: 160px" clearable v-else-if="dsInfo.searchExp == 'dict'">
          <el-option
            v-for="dict in searchOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>

        <el-tree-select v-else-if="dsInfo.searchExp == 'tree'"
            v-model="queryParams.searchValue"  clearable  :data="searchOptions" 
            :props="{ value: 'id', label: 'label', children: 'children' }" 
            value-key="id" placeholder="请选择" check-strictly />

        <el-date-picker v-else-if="dsInfo.searchExp == 'range'"
          v-model="dtRange"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
        
        <el-date-picker v-else-if="dsInfo.searchExp == 'day'"
          v-model="queryParams.searchValue"
          value-format="YYYY-MM-DD"
          type="date"
        ></el-date-picker>
        <el-date-picker v-else-if="dsInfo.searchExp == 'month'"
          v-model="queryParams.searchValue"
          value-format="YYYY-MM"
          type="month"
        ></el-date-picker>
        <el-date-picker v-else-if="dsInfo.searchExp == 'year'"
          v-model="queryParams.searchValue"
          value-format="YYYY"
          type="year"
        ></el-date-picker>
        <span v-else>不支持的搜索条件</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>  
    <div v-else style="height:120px"></div>
    
    <charts :chart-info="chartInfo" :queryParams="chartParams"/>   
      </el-col>
    </el-row> 
  </div>
</template>

<script setup name="ChartView">
import { getChartInfo, dsData } from "@/api/dev/modelData";
import { getDicts } from '@/api/system/dict/data';
import Charts from '@/components/Charts/index';

const { proxy } = getCurrentInstance();
const route = useRoute();

const chartInfo = ref(null);
const queryParams = ref({searchValue:null});
const chartParams = ref(null);

const dtRange = ref([]);
const dsInfo = ref({});
const searchOptions = ref([]);

(() => {
  const chartCode = route.query.code || route.params.code;
  if (chartCode) {
    getChartInfo(chartCode).then(response=>{
        chartInfo.value = response.data;
        dsInfo.value = response.data.ds;
        console.log(dsInfo.value)
        if(dsInfo.value.searchExp == null || dsInfo.value.searchExp == '0'){
            return;
        }
        //加载搜索数据源
        if(!dsInfo.value.searchDs){
            return;
        }
        if(dsInfo.value.searchExp == 'dict'){
            loadDict();
        }else{
            loadDs();
        }       
    })
  }
})();

function loadDs(){
    dsData(dsInfo.value.searchDs).then(response=>{
        if(dsInfo.value.searchType == 'tree'){
            searchOptions.value = proxy.handleTree(response.data, "id", "pid");
        }else{
            searchOptions.value = response.data;
        }
    });
}
 
function loadDict() {
    getDicts(dsInfo.value.searchDs).then(resp => {
        searchOptions.value = resp.data.map(p => ({ label: p.dictLabel, value: p.dictValue}))
    });
}

/** 搜索按钮操作 */
function handleQuery() {
    let ps = {};
    if(dsInfo.value.searchExp == 'dt' && dtRange.value.length > 1){
        ps[dsInfo.value.searchField] = dtRange.value.join(',');
    }else if(queryParams.value.searchValue != null || queryParams.value.searchValue != ''){
        ps[dsInfo.value.searchField] = queryParams.value.searchValue;
    }else{
        ps = null;
    }
    chartParams.value = ps;
}

/** 重置按钮操作 */
function resetQuery() {
  dtRange.value = [];
  queryParams.value.searchValue = null;
  chartParams.value = null;
  proxy.resetForm("queryRef");
}

</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
